import React, { 
  useState,
  useEffect
} from 'react'
import HOCLogin from '../../utils/HOCLogin'
import axios from "axios"
// import { Checkbox } from 'react-vant'

// function message(){
 
// }


// import React from 'react'

function Message() {
  const [list,setList]=useState([])
  const [allCheck,setAllCheck]=useState(false)
let [totalprice,settotalprice]=useState(0)
 let [totalnum,settotalnum]=useState(0)
  useEffect(()=>{
    axios.get("/shoplist").then((res)=>{
      setList(res.data)
    })

  },[])

  const add=(id)=>{
    list.forEach((item,index)=>{
      if(item.id===id){
        item.num++
      }
    })
    setList([...list])
    total()
  }
  const total=()=>{
    totalnum =list.reduce((sum,item)=>{
      if(item.isCheck){
        sum+=item.num
      }
      return sum
    },0)
    settotalnum(totalnum)
    totalprice =list.reduce((sum,item)=>{
      if(item.isCheck){
        sum+=(item.num*item.price)
      }
      return sum
    },0)
    settotalprice((totalprice).toFixed(2))
    total()

  }
  const del=(id)=>{
    list.forEach((item,index)=>{
      if(item.id===id){
        // if(item.num===1){
        //    alert("至少一件")
        // }else{
           item.num--
        // }     
      }
    
    })
    setList([...list])
    total()
  }
  const onallcheck=(e)=>{
    setAllCheck(e.target.checked)
    list.forEach((item)=>{
      item.isCheck=e.target.checked
    })
    setList([...list])
    total()
  }
  const oncheckItem=(id)=>{
    list.forEach((item)=>{
      if(item.id===id){
         item.isCheck=!item.isCheck
      }
     
    })
    let flag=  list.every((item)=>{
      return item.isCheck
    })
    setAllCheck(flag)
    setList([...list])
    total()
  }
  return (
    <div>
    <div className='title'>
     全选： <input type="checkbox" name="" id="" checked={allCheck}onChange={
      onallcheck
     } />
    </div>
    <div className='list'>
      {list.length ?list.map((item)=>{
        return <li key={item.id}>
  <input type="checkbox"  checked={item.isCheck} onChange={
    ()=>{
        oncheckItem(item.id)
    }
  
  }/>
      <img src={item.img}/>
      {item.title}
      {item.price}
     <button 
      //  item.num==1 ?disabled :''
       disabled={item.num==1}
     onClick={
 
       ()=>{del(item.id)

       }
     }>-</button> {item.num} <button onClick={()=>{
       add(item.id)

     }}>+</button>
        </li>
      }):'z暂无数据'

      }
    
      
    </div>
    <div className='bottom'>
     全选 <input type="checkbox" name="" id="" checked={allCheck} onClick={
      onallcheck
     }/>
      总价<span>{totalprice}</span>
      <button disabled={totalnum==0}>{totalnum} 数量</button>
    </div>
  </div>
  )
}

export default HOCLogin  (Message)